<template>
  <div>
    <el-divider class="el-divider-specail" content-position="left"
      >基础信息</el-divider
    >
    <el-descriptions class="margin-top" :column="3" :size="size" border>
      <el-descriptions-item
        :label-style="{ width: '150px' }"
        :content-style="{ width: '200px' }"
      >
        <template slot="label"> 申领单编号 </template>
        {{ formData.num }}
      </el-descriptions-item>
      <el-descriptions-item
        :label-style="{ width: '150px' }"
        :content-style="{ width: '200px' }"
      >
        <template slot="label"> 申请人 </template>
        {{ formData.requisitionPeopleName }}
      </el-descriptions-item>
      <el-descriptions-item
        :label-style="{ width: '150px' }"
        :content-style="{ width: '200px' }"
      >
        <template slot="label"> 申请时间 </template>
        {{ formatTime(formData.requisitionTime) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 申领类型 </template>
        {{ formData.requisitionTypeName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 是否需要归还 </template>
        {{ formData.whetherReturnName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 状态 </template>
        {{ formData.stateName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 用途 </template>
        {{ formData.purpose }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 申领仓库 </template>
        {{ formData.storageName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 备注 </template>
        {{ formData.remark }}
      </el-descriptions-item>
    </el-descriptions>
    <el-divider class="el-divider-specail" content-position="left"
      >申领物料</el-divider
    >
    <el-table
      :data="formData.requisitionFormDetailsList"
      element-loading-text="Loading"
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column align="center" label="物料编号">
        <template slot-scope="scope">
          {{ scope.row.materialNum }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="物料名称">
        <template slot-scope="scope">
          {{ scope.row.materialName }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="物料别名">
        <template slot-scope="scope">
          {{ scope.row.aliasName }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="分类">
        <template slot-scope="scope">
          {{ scope.row.typeName }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="型号规格">
        <template slot-scope="scope">
          {{ scope.row.size }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="包装单位">
        <template slot-scope="scope">
          {{ scope.row.packingUnit }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="存储条件">
        <template slot-scope="scope">
          {{ scope.row.storeCondition }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="申领数量">
        <template slot-scope="scope">
          {{ scope.row.count }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="实际领取数量" width="100px">
        <template slot-scope="scope">
          {{ scope.row.actualCountInt }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="使用日期" width="150px">
        <template #header>
          <span v-if="editState && !readOnly" style="color: red">*</span
          >使用日期
        </template>
        <template slot-scope="scope">
          <el-date-picker
            v-if="editState && !readOnly"
            v-model="scope.row.useDate"
            type="date"
            placeholder="选择时间"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
          <span v-else> {{ formatTime(scope.row.useDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="使用人">
        <template #header>
          <span v-if="editState && !readOnly" style="color: red">*</span>使用人
        </template>
        <template slot-scope="scope">
          <el-select
            v-if="editState && !readOnly"
            v-model="scope.row.usePeopleId"
            placeholder="请选择"
            clearable
            reserve-keyword
            filterable
            :remote-method="remoteUser"
            @change="(val) => selectRequisitionPeople(val, scope.$index)"
          >
            <el-option
              v-for="item in userList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>

          <span v-else>{{ scope.row.usePeopleName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="初始压力(Mpa)" width="100px">
        <template slot-scope="scope">
          <el-input
            v-if="editState && !readOnly"
            v-model="scope.row.initialPressure"
            autocomplete="off"
            placeholder="请输入"
          />
          <span v-else>{{ scope.row.initialPressure }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="结束压力(Mpa)" width="100px">
        <template slot-scope="scope">
          <el-input
            v-if="editState && !readOnly"
            v-model="scope.row.closingPressure"
            autocomplete="off"
            placeholder="请输入"
          />
          <span v-else> {{ scope.row.closingPressure }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { get } from "../../../api/Material/MaterialRequisitionForm.js";
import {getUserListNoPage} from "@/ModulePermission/api/Permission/PermissionUser.js";
import { formatTime } from "../../../utils/time";
export default {
  name: "MaterialRequisitionFormView",
  components: {},
  props: {
    id: {
      type: String,
      default: "",
    },
    editState: {
      type: Boolean,
      default: false,
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      size: "",
      formatTime,
      userList: [],
      formData: {
        id: 0,
        num: "",
        requisitionTypeCode: "",
        requisitionTypeName: "",
        requisitionPeopleId: "",
        requisitionPeopleName: "",
        whetherReturnCode: "1",
        whetherReturnName: "",
        purpose: "",
        remark: "",
        requisitionTime: null,
        stateCode: 0,
        stateName: "",
        creatorId: 0,
        creatorName: "",
        storageId: "",
        storageName: "",
        requisitionFormDetailsList: [],
      },
    };
  },
  watch: {},
  created() {
    this.init();
    if (this.editState) {
      this.editInit();
    }
  },
  methods: {
    editInit() {
      getUserListNoPage({ userStatus: 1 })
        .then((res) => {
          this.userList = res.data;
        });
    },
    init() {
      get({ id: this.id }).then((res) => {
        this.formData = res.data;
        if (this.editState) {
          for (
            let i = 0;
            i < this.formData.requisitionFormDetailsList.length;
            i++
          ) {
            this.formData.requisitionFormDetailsList[i].usePeopleId =
              this.formData.requisitionPeopleId;
            this.formData.requisitionFormDetailsList[i].usePeopleName =
              this.formData.requisitionPeopleName;
          }
        }
      });
    },
    selectRequisitionPeople(val, index) {
      var obj = {};
      obj = this.userList.find(function(i) {
        return i.id === val;
      });
      this.formData.requisitionFormDetailsList[index].usePeopleId = obj.id;
      this.formData.requisitionFormDetailsList[index].usePeopleName = obj.name;
    },
    remoteUser(query) {
      getUserListNoPage({ name: query, userStatus: 1 })
        .then((res) => {
          this.userList = res.data;
        });
    },
  },
};
</script>
